<!-- 聊天内容框 -->
<script lang='ts' setup>
import {
    Edit,
} from '@element-plus/icons-vue'
import { ref, watch, defineProps } from 'vue'
const props = defineProps({
    users: {
        type: Object,
        required: true,
    },
    buttonSize: {
        type: Boolean,
    }
})
const emit = defineEmits(['replyEven'])
const reply = (user: any) => {
    //点击恢复聚焦到编辑框
    document.getElementById('disEditor')!.focus()
    //点击修改回复span 昵称
    document.getElementById('nickname')!.innerText = user.nickname
    //显示 回复
    console.log("点击恢复获取被回复者的信息：", user)
    emit('replyEven', { isshow: true, userinfo: user })
}
</script>
<template>
    <div style="display:flex;">
        <div style="flex: 1;">
            <img :src="props.users.files" alt="" style="width: 50px;height: 50px;border-radius: 100%;">
        </div>
        <!--    <el-avatar :size="40" :src="props.users.files" style="flex: 1;" /> -->
        <div style="margin-left: 10px;flex: 9;">
            <slot></slot>
            <p style="font-size:14px; color: gray;padding: 10px;  word-wrap: break-word; word-break: break-all;">
                {{ props.users.content }}
            </p>
        </div>
    </div>
    <!--  点赞 回复按钮 -->
    <div style="display: flex;justify-content: space-between; align-items: center;">
        <span style="color:gray;font-size: 14px;">{{ props.users.createtime }}</span>
        <div>
            <label>
                <el-button :size="props.buttonSize ? 'small' : 'default'" text>
                    👍 {{ props.users.hotCount }}
                </el-button>
            </label>
            <label>
                <el-button :size="props.buttonSize ? 'small' : 'default'" text>
                    👎 {{ props.users.coolCount }}
                </el-button>
            </label>
            <label>
                <el-button :size="props.buttonSize ? 'small' : 'default'" :icon="Edit" text @click="reply(props.users)">
                    111
                </el-button>
            </label>
        </div>
    </div>
</template>
<style lang='scss' scoped>
</style>
